<template>
    <div class="wrap">
        <van-pull-refresh
  v-model="isLoading"
  success-text="刷新成功"
  @refresh="onRefresh"
>

 <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
  <div class="wrap-list" v-for="(item,index) in listData" :key="index">
         <div class="inner">
             <div class="left">
             <div class="name">{{item.visitorName}}</div>
             <div class="phone">{{item.visitorPhone}}</div>
             <div class="time">{{item.createTime}}</div>
            
         </div>
         <div class="right">
            <span  style="color:blue" v-if="item.requestStatus==0">{{item.shows}}</span>
              <span style="color:red" v-if="item.requestStatus==1">{{item.shows}}</span>
              <span  style="color:green" v-if="item.requestStatus==2">{{item.shows}}</span>
         </div>
         </div>
     </div>
   
  </van-list>
   
</van-pull-refresh>
    
    </div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/historycheck.js'
    export default {
        data: function () {
            return {
                loading:false,
               finished:false,
               isLoading:false,
               listData:[],
                   currentPage:1, 
                   pageSize:10,
              
                villageList:[],
              
               
            
            
            }
        },
        components: {
           
        },
        created(){
            this.getVillage()
            //this.getlist()
            
        },
        mounted() {
           
        },
        methods: {
            onLoad(){
                this.getlist()
            },
            onRefresh(){
                this.finished=false
                this.currentPage=1
                this.listData=[]
                
            },
            getlist(){
                let that=this
                let obj={
                    currentPage:this.currentPage,
                    pageSize:10,
                    condition:{
                        ownerOpenId:openid
                    }
                }
                api.getlist(obj).then(e=>{
                    that.isLoading=false
                    that.loading=false
                    that.listData=that.listData.concat(e.data).map(item=>{
                        item.createTime=new Date(item.createTime).Format("yyyy-MM-dd HH:mm:ss");
                        item.shows=item.requestStatus==0?'未审核':(item.requestStatus==1?'不通过':'通过')
                        return item
                    })
                    that.currentPage++
                    if(e.data.length<10){
                        that.finished=true
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            getVillage(){
               let that=this 
               api.getVillage().then(e=>{
                  if(e.code==200){
                        that.villageList=e.data.map(item=>{
                            item.text=item.name
                            return item
                        })
                  }
                  
                  
               }).catch(err=>{
                   console.log(err)
               })
            },
          
         

            villageConfirm(val){
                this.form.communityId=val.id
                this.village=val.text
                this.villagePicker=false
            },
          
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
  .wrap{
      font-size:px2rem(11px);
      background:#f5f5f5;

  }
  .wrap-list{
      border-radius:6px;
       box-sizing: border-box;
      padding:12px 16px 14px 16px;
      background:#fff;
      width:95%;
      margin: 6px auto;
  }
  .wrap-list .inner{
      display:flex;
      align-items: center;
      justify-content: space-between;
     

}
.phone{
    margin:6px 0;
}
.wrap-list .btns{
    display:flex;
    justify-content: flex-end;
    
}
.wrap-list .btns .pass{
    color:green;
    padding-right:12px;
   
    
}
.wrap-list .btns .pass:after{
  display:block;
   content: '';
   height:16px;
   position:relative;
   top:-50%;
   border-right:1px solid red; 
   right:-6px; 
    
}
.wrap-list .btns .nopass{
    color:red;
    
}

</style>
